<template>
	<view class="container">
		<uv-tabs :list="computedValue.categoryList()" :itemStyle="itemStyle" keyName="name"
			:inactiveStyle="scrollTop > 10?inactiveStyle2:inactiveStyle"
			:activeStyle="scrollTop > 10?activeStyle2:activeStyle" :lineHeight="0" @change="tabsChange">
			<template v-slot:right>
				<view style="padding-left: 4px;" @tap="tabsSlotChange">
					<uv-icon name="list" size="21" :color="scrollTop > 10?'#000000':'#FFFFFF'"></uv-icon>
				</view>
			</template>
		</uv-tabs>
	</view>
</template>

<script setup>
	import { switchTab, navigateTo } from '@/utils/router.js'
	import { computed } from 'vue'

	const itemStyle = {
		padding: '0 7.5px'
	}

	const inactiveStyle = {
		fontSize: '28rpx',
		color: 'rgba(225, 225, 225, 0.8)',
	}

	const inactiveStyle2 = {
		fontSize: '28rpx',
		color: 'rgba(0, 0, 0, 0.5)',
	}

	const activeStyle = {
		fontSize: '28rpx',
		color: '#FFFFFF',
	}

	const activeStyle2 = {
		fontSize: '28rpx',
		color: '#000000',
	}

	const props = defineProps({
		scrollTop: {
			type: Number,
			default: 0
		}
	})
	const computedValue = computed(() => {
		return {
			categoryList() {
				// const newList = [...this.productCategoryList];
				const newList = [{
						name: "医美"
					}, {
						name: "口腔耗材"
					}, {
						name: "水乳"
					},
					{
						name: "水乳"
					},
					{
						name: "水乳"
					},
					{
						name: "水乳"
					},
					{
						name: "水乳"
					},
					{
						name: "水乳"
					},
					{
						name: "水乳"
					}
				]
				newList.unshift({
					name: '首页',
					id: 0
				});
				return newList;
			}
		}
	})


	// tab更多点击事件
	const tabsSlotChange = () => {
		switchTab('/pages/category/index')
	}

	// tab点击事件
	const tabsChange = (e) => {
		if (e.id === 0) return;
		navigateTo(`/subPackages/search/list?category_id=${e.id}&mod_type=${e.mod_type}`);
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 16rpx 28rpx 0 15rpx;
	}
</style>